<template>
  <!-- 用户详情卡片 -->
  <div v-if="openDetails" class="user-detail-overlay">
    <div class="user-card-container">
      <div class="user-card">
        <!-- 顶部信息栏 -->
        <div class="user-card-header">
          <div class="user-info">
            <el-avatar 
              :size="64" 
              :src="userDetails.image" 
              class="user-avatar"
              @error="handleAvatarError"
            >
              <el-icon><User /></el-icon>
            </el-avatar>
            <div class="user-header-details">
              <h3 class="user-name">{{ userDetails.userName || '未设置昵称' }}</h3>
              <el-tag :type="userDetails.status == 0 ? 'info' : (userDetails.inviteCode ? 'warning' : 'success')" size="small">
                {{userDetails.status == 0 ? "未认证" : 
                  (userDetails.inviteCode ? "赞助商认证" : "学生认证")}}
              </el-tag>
            </div>
          </div>
          <el-button type="text" @click="handleClose" class="close-btn">
            <el-icon><Close /></el-icon>
          </el-button>
        </div>
        
        <!-- 内容区 -->
        <div class="user-card-content">
          <!-- 基本信息 -->
          <div class="info-section">
            <h4 class="section-title">基本信息</h4>
            <div class="info-grid">
              <div class="info-item" v-if="userDetails.schoolId">
                <span class="info-label">学校</span>
                <span class="info-value">{{ getSchoolNameById(userDetails.schoolId) }}</span>
              </div>
              <div class="info-item" v-if="userDetails.studentId">
                <span class="info-label">学号</span>
                <span class="info-value">{{ userDetails.studentId }}</span>
              </div>
              <div class="info-item" v-if="userDetails.inviteCode">
                <span class="info-label">邀请码</span>
                <span class="info-value">{{ userDetails.inviteCode }}</span>
              </div>
              <div class="info-item">
                <span class="info-label">可取货次数</span>
                <span class="info-value highlight">{{ userDetails.availableTimes }}</span>
              </div>
            </div>
          </div>
          
          <!-- 时间信息 -->
          <div class="info-section">
            <h4 class="section-title">时间信息</h4>
            <div class="info-grid">
              <div class="info-item">
                <span class="info-label">注册时间</span>
                <span class="info-value">{{ userDetails.createTime }}</span>
              </div>
              <div class="info-item">
                <span class="info-label">更新时间</span>
                <span class="info-value">{{ userDetails.updateTime }}</span>
              </div>
            </div>
          </div>
          
          <!-- 备注信息 -->
          <div class="info-section" v-if="userDetails.remark">
            <h4 class="section-title">备注信息</h4>
            <div class="remark-content">
              {{ userDetails.remark }}
            </div>
          </div>
        </div>
      </div>
    </div>
  </div>
</template>

<script setup>
import { ref } from 'vue'
import { getUser } from "@/api/manage/user";
import { parseTime } from "@/utils/ruoyi";
import { User, Close } from '@element-plus/icons-vue';
// 导入默认头像
import defaultAvatarImg from '@/assets/images/profile.jpg';

const props = defineProps({
  schools: {
    type: Array,
    required: true
  }
});

const emit = defineEmits(['close']);

const openDetails = ref(false);
const userDetails = ref({});
// 使用导入的默认头像
const defaultAvatar = ref(defaultAvatarImg);

/**根据学校id获取学校姓名 */
function getSchoolNameById(id) {
  for (let i = 0; i < props.schools.length; i++) {
    if (props.schools[i].id == id) {
      return props.schools[i].schoolName;
    }
  }
  return '未知学校';
}

/**查看用户详情按钮 */
function handleLookDetails(id) {
  userDetails.value = {};
  getUser(id).then((response) => {
    userDetails.value = response.data;
    openDetails.value = true;
  });
}

/**关闭对话框 */
function handleClose() {
  openDetails.value = false;
  emit('close');
}

/**处理头像加载错误 */
function handleAvatarError() {
  console.warn('Avatar image loading failed, fallback to default avatar');
}

defineExpose({
  handleLookDetails,
  handleClose
});
</script>

<style scoped>
/* 遮罩层样式 */
.user-detail-overlay {
  position: fixed;
  top: 0;
  left: 0;
  width: 100%;
  height: 100%;
  background-color: rgba(0, 0, 0, 0.5);
  display: flex;
  justify-content: center;
  align-items: center;
  z-index: 2000;
}

/* 卡片容器 */
.user-card-container {
  width: 560px;
  max-width: 90vw;
  max-height: 90vh;
  overflow: auto;
  animation: slide-in 0.3s ease;
}

@keyframes slide-in {
  from {
    opacity: 0;
    transform: translateY(-20px);
  }
  to {
    opacity: 1;
    transform: translateY(0);
  }
}

/* 卡片样式 */
.user-card {
  border-radius: 12px;
  overflow: hidden;
  background-color: #fff;
  box-shadow: 0 6px 24px rgba(0, 0, 0, 0.12);
}

/* 卡片头部 */
.user-card-header {
  display: flex;
  justify-content: space-between;
  align-items: flex-start;
  padding: 24px 24px 16px;
  background: linear-gradient(135deg, #4b6cb7, #182848);
  color: white;
}

.user-info {
  display: flex;
  align-items: center;
  gap: 16px;
}

.user-avatar {
  border: 3px solid rgba(255, 255, 255, 0.7);
  box-shadow: 0 4px 8px rgba(0, 0, 0, 0.2);
}

.user-header-details {
  display: flex;
  flex-direction: column;
  gap: 8px;
}

.user-name {
  margin: 0;
  font-size: 20px;
  font-weight: 600;
}

.close-btn {
  color: white;
  font-size: 20px;
}

/* 卡片内容 */
.user-card-content {
  padding: 20px 24px 24px;
  max-height: calc(90vh - 100px);
  overflow-y: auto;
}

.info-section {
  margin-bottom: 24px;
  background-color: #f8f9fb;
  border-radius: 10px;
  padding: 16px;
}

.info-section:last-child {
  margin-bottom: 0;
}

.section-title {
  margin: 0 0 16px;
  font-size: 16px;
  font-weight: 600;
  color: #303133;
  border-left: 4px solid #4b6cb7;
  padding-left: 10px;
}

.info-grid {
  display: grid;
  grid-template-columns: repeat(2, 1fr);
  gap: 16px;
}

.info-item {
  display: flex;
  flex-direction: column;
  gap: 4px;
}

.info-label {
  font-size: 13px;
  color: #909399;
}

.info-value {
  font-size: 14px;
  color: #303133;
}

.info-value.highlight {
  font-size: 18px;
  font-weight: 600;
  color: #4b6cb7;
}

.remark-content {
  padding: 12px;
  background-color: white;
  border-radius: 6px;
  color: #606266;
  font-size: 14px;
  line-height: 1.5;
}

@media (max-width: 600px) {
  .info-grid {
    grid-template-columns: 1fr;
  }
}
</style> 